Skip to content

feat(ui): error display, network banner, env validation, and frontend README [UI #17, #18, #19, #20]#181

Merged
Tinna23 merged 1 commit intoStellarCommons:mainfrom
Tyler7x:feat/ui-17-20-error-display-dx-readme
Mar 24, 2026
Merged

feat(ui): error display, network banner, env validation, and frontend README [UI #17, #18, #19, #20]#181
Tinna23 merged 1 commit intoStellarCommons:mainfrom
Tyler7x:feat/ui-17-20-error-display-dx-readme

Conversation

@Tyler7x
Copy link
Copy Markdown
Contributor

@Tyler7x Tyler7x commented Mar 24, 2026

Summary

Covers error handling polish, developer experience tooling, and documentation.
All four issues are grouped as they are non-blocking quality improvements
that don't depend on each other.

Changes

UI #17 — Shared ErrorDisplay component

  • src/components/ErrorDisplay.tsx — typed error display accepting ApiError | Error
  • NOT_FOUND → contextual message with truncated identifier
  • UPSTREAM_ERROR → network unreachable message with retry button
  • BAD_REQUEST → displays backend message directly
  • Unknown errors → generic fallback with retry button
  • src/app/tx/[hash]/page.tsx — replaced inline error div with ErrorDisplay
  • src/app/account/[address]/page.tsx — replaced inline error div with ErrorDisplay
  • Error state refactored to Error | null to satisfy TypeScript strict mode
  • load extracted to useCallback so retry can call it directly

UI #18 — Network status banner

  • src/components/NetworkStatusBanner.tsx — polls GET /health every 60s
  • Shows sticky amber banner only when status !== "ok" or horizon_reachable === false
  • Dismiss button hides for session, auto-recovers on next poll
  • Non-blocking — never delays page render
  • Wired into src/app/layout.tsx

UI #19 — Environment variable validation

  • src/lib/env.tsrequireEnv() throws in dev if missing, warns in prod
  • API_URL validated before any proxy route runs
  • All three proxy routes updated to import API_URL from @/lib/env
  • .env.local.example updated with all variables documented

UI #20 — Frontend README

  • packages/ui/README.md — full rewrite (previous file contained backend Rust docs)
  • Covers: prerequisites, setup steps, all env vars, all scripts, full project
    structure, connecting to backend (Cargo and Docker), architecture notes
    (proxy pattern, AppShell context, route table)

How to test

npm install
cp .env.local.example .env.local
npm run dev

# Env validation: remove API_URL from .env.local → dev server should error
# Network banner: stop the backend → amber banner appears within 60s
# Error display: enter an invalid hash → NOT_FOUND error renders correctly
# Retry button: enter a hash when backend is down → UPSTREAM_ERROR + retry

Closes

Closes #165
Closes #166
Closes #167
Closes #168

@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 24, 2026

@Tyler7x Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Tinna23 Tinna23 merged commit e54a2dc into StellarCommons:main Mar 24, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants